<template>
  <div class="wxc-demo">
    <wxc-minibar @wxcMinibarRightButtonClicked="minibarRightButtonClick"
                 right-text="..."></wxc-minibar>
    <wxc-popover ref="wxc-popover"
                 :buttons="btns"
                 :position="popoverPosition"
                 :arrowPosition="popoverArrowPosition"
                 @wxcPopoverButtonClicked="popoverButtonClicked"></wxc-popover>
  </div>
</template>

<script>


  export const WEEXUI_ICON = 'https://gw.alicdn.com/tfs/TB1JpgJRFXXXXc7XpXXXXXXXXXX-800-800.png';
  export const RETURN_ICON = 'https://gw.alicdn.com/tfs/TB1cAYsbv2H8KJjy0FcXXaDlFXa-30-53.png';
  export const SCAN_ICON = 'https://gw.alicdn.com/tfs/TB1Vm3abuuSBuNjy1XcXXcYjFXa-64-64.png';
  export const QRCODE_ICON = 'https://gw.alicdn.com/tfs/TB1U93abuuSBuNjy1XcXXcYjFXa-64-64.png';
  export const QUESTION_ICON = 'https://gw.alicdn.com/tfs/TB1MWDTbwmTBuNjy1XbXXaMrVXa-64-64.png';

  import { WxcMinibar, WxcPopover} from 'weex-ui';

  const modal = weex.requireModule('modal');

  // https://github.com/alibaba/weex-ui/blob/master/example/popover/type.js
  // import { RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from './type';

  export default {
    components: { WxcMinibar, WxcPopover },
    data: () => ({
      leftButton: RETURN_ICON,
      btns:[
        {
         icon: SCAN_ICON,
         text:'Scan',
         key:'key-scan'
        },
        {
          icon: QRCODE_ICON,
          text:'My Qrcode',
          key:'key-qrcode'
        },
        {
          icon: QUESTION_ICON,
          text:'Help',
          key:'key-help'
        },
      ],
      popoverPosition:{x:-14,y:64},
      popoverArrowPosition:{pos:'top',x:-15}
    }),
    methods: {
      minibarRightButtonClick () {
        this.$refs['wxc-popover'].wxcPopoverShow();
      },
      popoverButtonClicked (obj) {
        modal.toast({ 'message': `key:${obj.key}, index:${obj.index}`, 'duration': 1 });
      }
    }
  };
</script>
